<template>
	<el-card class="box-card">
		<el-steps :active="5" align-center>
		  <el-step title="基础信息"></el-step>
		  <el-step title="商户位置"></el-step>
		  <el-step title="联系方式"></el-step>
		  <el-step title="门头照"></el-step>
		  <el-step title="资质信息照片上传"></el-step>
		  <el-step title="资质信息"></el-step>
		  <el-step title="银行账号信息"></el-step>
		  <el-step title="银行账号信息照片上传"></el-step>
		</el-steps>
		<el-row class="box-row">
			<el-form :model="formData" ref="formData" :rules="rules">
				<el-form-item class="title">
					<el-col :span="24">资质信息</el-col>
				</el-form-item>
				<el-form-item prop="licenseCode">
					<el-input v-model="formData.licenseCode" placeholder="请输入营业执照号" style="width:50%;"></el-input>
				</el-form-item>
				<el-form-item prop="representative">
					<el-input v-model="formData.representative" placeholder="法人代表" style="width:50%;"></el-input>
				</el-form-item>
				<el-form-item prop="registerAddress">
					<el-input v-model="formData.registerAddress" placeholder="注册地址" style="width:50%;"></el-input>
				</el-form-item>
				
				<el-form-item prop="licenseExpireTime">
					<el-date-picker v-model="formData.licenseExpireTime" type="date" placeholder="营业执照到期日" style="width:50%"></el-date-picker>
				</el-form-item>
			</el-form>
			
			<el-button type="primary" style="width:50%;margin-top: 10px;" @click="submitForm('formData')">下一步</el-button>
		</el-row>
	</el-card>
</template>

<script>
	import {customerUpdate,customerInfo} from '@/api/getData'
	import dtime from 'time-formater'
	export default {
		data() {
			return {
				formData: {
					id: "",
					licenseCode: "",
					representative: "",
					registerAddress: "",
					licenseExpireTime: "",
					currentStep:"6",
				},
				rules:{
					licenseCode: [
			            { required: true, message: '请输入营业执照号', trigger: 'blur' },
			            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
			        ],
			        representative: [
			            { required: true, message: '请输入法人代表', trigger: 'blur' },
			            { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
			        ],
			        registerAddress: [
			            { required: true, message: '请输入注册地址', trigger: 'change' },
			            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
			        ],
			        licenseExpireTime: [
			            { required: true, message: '请输入营业执照到期日', trigger: 'change' },
			        ],
				},
			}
		},
		mounted() {
			this.formData.id = this.$route.query.id;
			if(this.formData.id != undefined && this.formData.id != ""){
				this.customerInfo(this.formData.id);
			}
		},
		methods: {
			async customerInfo(id) {
				const res = await customerInfo({
					id: id,
				});
				if(res.code == "0") {
					this.formData.licenseCode = res.obj.licenseCode;
					this.formData.representative  = res.obj.representative;
					this.formData.registerAddress  = res.obj.registerAddress;
					this.formData.licenseExpireTime  = res.obj.licenseExpireTime;
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			async submitForm(formName) {
				
				this.$refs[formName].validate(async(valid) => {
					if(valid) {
						if(typeof this.formData.licenseExpireTime != 'string'){
							this.formData.licenseExpireTime = dtime(this.formData.licenseExpireTime.getTime()).format('YYYY-MM-DD')
						}
						let res = await customerUpdate(this.formData);
						if(res.code == "0") {
							this.$router.push({
								path: 'businessSeven',
								query: {
									id: res.id
								}
							})
						} else {
							this.$notify.error({
								title: '错误',
								message: res.msg,
								offset: 100
							});
						}
					}
				});
			},
		},
	}
</script>

<style scoped>
	.box-card {
		margin: 0 10px;
	}
	
	.title {
		background-color: #20a0ff;
		line-height: 60px;
		font-size: 18px;
		color: #fff;
		width: 50%;
		margin: 10px auto;
	}
	
	.box-row {
		margin: 20px auto;
		width: 100%;
		text-align: center;
	}
	.iconClass{
		font-size: 24px;
		color:#66b1ff;
	}
</style>